<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading">
			<template #icon>
				<loader></loader>
			</template>
		</e-loading-page>
		<scroll-view class="tab bg-white" scroll-x="true">
			<view class="e-flex">
				<view class="tab-item text-center e-rela fw-600" @tap="setTabIndex(0)" :class="{ 'tab-active': tabIndex == 0 }">
					{{ $t('common.全部') }}
				</view>
				<view
					class="tab-item text-center e-rela e-flex-1 fw-600"
					v-for="(item, index) in reservationOrderStatusText"
					@tap="setTabIndex(index + 1)"
					:class="{ 'tab-active': tabIndex == index + 1 }"
				>
					{{ item.dictLabel }}
				</view>
			</view>
		</scroll-view>
		<view class="search e-flex e-p-l-20 e-p-r-20">
			<view class="e-flex-1">
				<e-search
					height="34"
					:show-action="false"
					bgColor="#fff"
					:search-icon-color="AppSkin.primary"
					:placeholder="$t('order.reservationOrderPlaceholder')"
					v-model="keyword"
					@search="handleSearch"
				></e-search>
			</view>
		</view>

		<swiper class="swiper" :current="tabIndex" @change="(e) => setTabIndex(e.detail.current)">
			<swiper-item v-for="(item, index) in orderList" :key="index">
				<scroll-view scroll-y @scrolltolower="getData(index)" lower-threshold="60">
					
					<view class="e-m-t-20 e-p-l-20 e-p-r-20" v-for="order in item.list" :key="order.id" @tap="$goTo('/pages/order/reservation/details', { id: order.id })">
						<order-goods-card
							:receivingStatus="order.state"
							:store="order"
							:goodsList="[order]"
							:goodsKeys="goodsKeys"
							:storeKeys="storeKeys"
							:isJump="false"
							goodsLink="/pages/nearby/goods/index"
						>
							<template #statusText>
								<text class="c-primary">
									{{ $selectDictLabel(reservationOrderStatusText, order.state) }}
								</text>
							</template>

							<template #button="{ goods, receivingStatus }">
								<goods-status
									:goods="goods"
									:receivingStatus="receivingStatus"
									@tap.native="$goTo('/pages/order/reservation/details', { id: order.id })"
								></goods-status>
							</template>
						</order-goods-card>
						<view class="bg-white">
							<view class="text-right e-p-30 fw-600 shadow-f3">{{ $t('order.实付') }}{{ $unitEn }}{{ order.payMoney }}</view>
							<order-button
								class="shadow-f3"
								:info="order"
								:isDetail="false"
								v-if="buttonShow(order)"
								@cancel="$goTo('/pages/order/reservation/details', { id: order.id, cancel: 1 })"
							></order-button>
						</view>
					</view>
					<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="item.isEmpty"></empty>
					<load-more v-else :showLoad="item.showLoad"></load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive,watch,computed } from 'vue';
import { getAppointmentOrderList } from '@/common/request/api';
import type { AppointmentOrderItem } from '@/common/request/api';
import { useQueryPage } from '@/common/hooks';
import orderButton from './child/order-button.vue';
import goodsStatus from '../child/goods-status.vue';
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { useOrder } from '@/common/stores';
import { storeToRefs } from 'pinia';

const orderStore = useOrder();
const { reservationOrderStatusText } = storeToRefs(orderStore);

const tabIndex = ref(0);
const keyword = ref('')
const orderList = reactive([
	useQueryPage({
		api: getAppointmentOrderList,
		option:{
			responseKey:'data.rows',
			totalKey:'data.total'
		},
		pageSize: 10
	})
]);

const requestParams = computed(() => {
	return {
		serviceName: keyword.value,
	}
})
const getData = (index:number) => {
	orderList[index].handleQueryPage(requestParams.value)
}
const handleSearch = () => {
	orderList[tabIndex.value].handleRefresh(requestParams.value)
}
const goodsKeys = {
				image: 'servicePhoto',
				skuName: 'serviceSpec',
				price: 'servicePrice',
				name: 'serviceName',
				qry: 'serviceCount'
			}
const storeKeys = {
				name: 'storeName',
				logo: 'storeLogo'
			}
const buttonShow = (order:AppointmentOrderItem) => {
			return order.state === 1;
		}

const loading = ref(true);

const setTabIndex = (index: number, e?: any) => {
	tabIndex.value = index;
	keyword.value = '';
	
	
};

watch(tabIndex,(v) => {
	if (orderList[v].list.length === 0) {
		loading.value = true;
		orderList[v].handleRefresh().finally(() => {
			loading.value = false;
		});
	}
})
let isLoad = true
onLoad(async () => {
	if (reservationOrderStatusText.value.length === 0) {
		await orderStore.getReservationOrderStatusText();
	}
	reservationOrderStatusText.value.map((item) => {
		const obj = reactive(useQueryPage({
				api: getAppointmentOrderList,
				pageSize: 10,
				option: {
					responseKey:'data.rows',
					totalKey:'data.total',
					params: {
						state:item.dictValue
					}
				},
			}))
		orderList.push(obj);
	})
	orderList[tabIndex.value].handleUpdate(requestParams.value).finally(() => {
		loading.value = false
	});
	
});
onShow(() => {
	if(isLoad){
		isLoad = false
	}else{
		orderList[tabIndex.value].handleUpdate(requestParams.value).finally(() => {
			loading.value = false
		});
	}
	
});

onPullDownRefresh(() => {
	orderList[tabIndex.value].handleRefresh(requestParams.value).finally(() => {
		uni.stopPullDownRefresh();
	});
});

</script>

<style lang="scss" scoped>
.shadow-f3 {
	box-shadow: 0px -2rpx 0px 0px #f3f3f3;
}

.tab {
	white-space: nowrap;
	width: 100%;
	height: 90rpx;

	.tab-item {
		padding: 0 38rpx;
		height: 90rpx;
		line-height: 90rpx;
		white-space: nowrap;
	}

	.tab-active {
		&::before {
			content: '';
			position: absolute;
			width: 46rpx;
			height: 6rpx;
			background: var(--color-primary);
			border-radius: 3rpx;
			bottom: 0;
			left: calc(50% - 23rpx);
		}
	}
}

.search {
	height: 120rpx;
}

.swiper {
	height: calc(100vh - 210rpx);

	scroll-view {
		height: 100%;
	}

	::v-deep {
		.goods-info2 {
			padding: 0 !important;
		}
	}
}
</style>
